<template>
    <div>
        <div id="title">药品审核管理</div>

        <div id="conditions">
            <div id="conditions-head">
                <i class="el-icon-search"></i>
                <span>筛选</span>
            </div>
            <el-form :inline="true" :model="conditionsform" class="form-inline">
                <el-form-item>
                    <el-input v-model="conditionsform.keywords" placeholder="输入药品名或药企名"></el-input>
                </el-form-item>
                <el-form-item label="药品分类">
                    <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">筛选</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="medicinepass">
            <div id="medicinepass-head">
                <i class="el-icon-document"></i>
                <span>数据列表</span>
            </div>
            <el-table id="medicinepass-table" ref="multipleTable" :data="tableData" tooltip-effect="dark"
                    @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="45"></el-table-column>
                <el-table-column prop="name" label="药品名称" width="100"></el-table-column>
                <el-table-column prop="image" label="列表图" width="100"></el-table-column>
                <el-table-column prop="price" label="价格" width="100"></el-table-column>
                <el-table-column prop="isListed" label="状态" width="100"></el-table-column>
                <el-table-column prop="isPassed" label="审核状态" width="100"></el-table-column>
                <el-table-column prop="stock" label="库存" width="100"></el-table-column>
                <el-table-column prop="addtime" label="发布时间" width="100"></el-table-column>
                <el-table-column prop="operation" label="操作" >
                    <template slot-scope="scope">
                    <el-button type="text" @click="ShowDetails(scope.$index, scope.row)">查看</el-button>
                    <el-button type="text"  @click="passMedicine(scope.$index, scope.row)">审核</el-button>
                        <el-dialog title="药品审核" :visible.sync="dialogFormVisible">
                            <el-form :model="passform">
                                <el-form-item label="药品名称" :label-width="formLabelWidth">
                                    <el-input v-model="passform.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="是否通过" :label-width="formLabelWidth">
                                    <el-radio v-model="passform.isPassed" label="passed">是</el-radio>
                                    <el-radio v-model="passform.isPassed" label="notPassed">否</el-radio>
                                </el-form-item>
                                <el-form-item label="备注" :label-width="formLabelWidth">
                                    <el-input type="textarea" placeholder="请输入备注" v-model="passform.remarks"
                                maxlength="140" show-word-limit></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button  size="small" @click="toggleSelection()">取消选择</el-button>
                <el-button size="small" type="danger" @click="multipleDelete()">批量删除</el-button>
              <el-pagination
                id="page"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total"></el-pagination>
            </div>

        </div>
    </div>
</template>b

<script>
export default {
    name:"Feedback",
    data() {
        return {
            value: [],
            options: [
                {
                value: '0',
                label: '请选择分类',
                    children: [

                    ]
                },
                {
                value: '1',
                label: '心血管系统用药',
                    children: [
                        {
                        value: '1-1',
                        label: '抗心律失常药',
                        },
                        {
                        value: '1-2',
                        label: '钙通道阻塞用药',
                        },
                        {
                        value: '1-3',
                        label: '慢性心功能不全',
                        }
                    ]
                },
                {
                  value: '2',
                  label: '呼吸系统用药',
                  children: [
                    {
                      value: '2-1',
                      label: '镇咳药',
                    },
                    {
                      value: '2-2',
                      label: '祛痰药',
                    },
                    {
                      value: '2-3',
                      label: '平喘药',
                    }
                  ]
                },
              {
                value: '3',
                label: '皮肤科用药',
                children: [
                  {
                    value: '3-1',
                    label: '皮肤溃疡药',
                  },
                  {
                    value: '3-2',
                    label: '达夫',
                  },
                  {
                    value: '3-3',
                    label: '天泰',
                  }
                ]
              }
            ],
            conditionsform: {
                keywords: '',
            },
            conditiontime: '',
            activeName: 'all',
            tableData: [

            ],
            currentPage4: 4,
            dialogFormVisible: false,
            passform: {
                name: '',
                isPassed:'',
                remarks:''
            },
            formLabelWidth: '120px',
            tempForm:{
                name: '',
                isPassed:'',
                remarks:''
            },
          total: 0
        }
    },
    methods: {
      onSubmit () {

      },
      toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        }
        )
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    multipleDelete () {
      console.log('删删删删删删删删删删删删');
    },

    handleCurrentChange (val) {
      this.initComponents(val, 10);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    addNewMedicine(){
        this.$router.push({path:'/index/addnewmedicine'})
    },
    passMedicine(index,row){
        this.dialogFormVisible=true;
    },

    initComponents(pageIndex, pageSize) {
     this.$axios({
       method: 'post',
       url: '/medicine/getSelected',
       data: {
         medicine: null,
         pageIndex: pageIndex,
         pageSize: pageSize
       }
     }).then(data => {
       this.tableData = data.data.list
       this.total = data.data.total
     })
    }
    },
  created() {
      this.initComponents(1, 10);
  }

}
</script>

<style>
    #title{
        font-size: 25px;
        font-weight: bolder;
    }
    #conditions{
        margin-top: 15px;
        border-color: lightgray;
        border-width: thin;
        border-style: solid;
        width: 1000px;
        height: 180px;
    }
    #conditions-head{
        background-color: #F2F2F2;
        height: 50px;
        font-size: 20px;
    }
    .el-icon-search{
        margin-left: 10px;
        margin-top:15px;
    }

    #medicinepass{
        margin-top: 15px;
        border-color: lightgray;
        border-width: thin;
        border-style: solid;
        width: 1000px;
        height: 1000px;
    }
    #medicinepass-head{
        background-color: #F2F2F2;
        height: 50px;
        font-size: 20px;
    }
    .el-icon-document{
        margin-left: 10px;
        margin-top:15px;
    }
    #page{
        float: right;
    }

</style>
